import React from 'react'
import {Image, Layout, Menu} from "antd";
import IconFont from "../icon";
import logo from "../../assets/images/logo.png";
import minLogo from "../../assets/images/minlogo.png";
import {useLocation, useNavigate} from "react-router-dom";
import {routers} from "../../router/index.config";
import {useMount, useObjectState} from "../../utils";

const {Sider} = Layout;

const filterItems = (data: any[]): any[] => data.map((item) => {
        if (item.isShow !== false) {
            const menu: {
                key: string,
                label: string,
                icon?: JSX.Element,
                children?: any[]
            } = {
                key: item.code,
                label: item.name,
            }
            if (item.iconName) {
                menu.icon = <IconFont type={item.iconName}/>
            }
            if (item.children) {
                menu.children = filterItems(item.children)
            }
            return menu
        } else {
            return null
        }
    }
)
const meRouter = routers.map(item => item.code)

export default function LeftNav(props: {
    list: Array<any>
}) {
    const navigate = useNavigate()
    const {pathname} = useLocation()
    const path = pathname.split('/')
    const [{collapsed, openKeys, selectedKeys}, setMenuConfig] = useObjectState({
        collapsed: false,
        openKeys: [],
        selectedKeys: ['ticket', 'cultural']
    });
    const items = filterItems([...props.list, ...routers])
    const goTo: (path: string[]) => void = (path) => {
        if (meRouter.includes(path[1])) {
            navigate(`/${path[1]}/${path[0]}`)
        }
    }
    const goWorkbench = () => {
        navigate('/workbench')
    }

    useMount(() => {
        setMenuConfig({openKeys: [path[1]], selectedKeys: [path[2], path[1]]})
    })

    return (
        <div style={{background: '#001529'}}>
            <Sider className={'leftNav'} collapsible collapsed={collapsed}
                   onCollapse={collapsed => {
                       if (collapsed) {
                           setMenuConfig({openKeys: [], collapsed})
                       } else {
                           setMenuConfig({collapsed})
                           setTimeout(() => {
                               setMenuConfig({collapsed, openKeys: [path[1]], selectedKeys: [path[2], path[1]]})
                           }, 0)
                       }
                   }}>
                <div className="logo" onClick={goWorkbench}><Image preview={false} src={collapsed ? minLogo : logo}/>
                </div>
                <Menu
                    theme={'dark'}
                    mode="inline"
                    defaultOpenKeys={['sub1']}
                    items={items}
                    openKeys={openKeys}
                    selectedKeys={selectedKeys}
                    onClick={({keyPath}) => {
                        goTo(keyPath)
                        setMenuConfig({selectedKeys: keyPath})
                    }}
                    onOpenChange={(openKeys: string[]) => {
                        setMenuConfig({openKeys: openKeys.slice(-1)})
                    }}
                />
            </Sider>
        </div>
    );
};